#@layout()

#define content()
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',border:true">
        <div class="easyui-panel" title="工具栏" style="width:100%;padding:10px;"
             data-options="iconCls:'icon-application_form'">
            #(_res.get('statics.form.select.year')) ：

            <input id="targetYear" style="width: 200px;">
        </div>
        <br>
        <div class="easyui-panel" title="统计结果" style="width:100%;padding:10px;"
             data-options="iconCls:'icon-application_form'">
            <div id="logoutCountCharts"
                 style="height: 400px;border:1px solid #ccc;padding:10px;"></div>
            <br>
            <div id="logoutCompareCountCharts"
                 style="height: 400px;border:1px solid #ccc;padding:10px;"></div>
        </div>
    </div>
</div>
#end


#define css()

#end


#define js()

<script type="text/javascript" src="#(ctx)/static/echarts/echarts.min.js"></script>
<script type="text/javascript" src="#(ctx)/static/echarts/macarons.js"></script>

<script type="text/javascript">

    var legendDataArr = new Array();
    legendDataArr.push("#(_res.get('statistic.echarts.logout.sum'))");
    #for(authType : authTypeList)
    legendDataArr.push("#(authType.dictName)");
    #end

    $(function () {
        $("#targetYear").combobox({
            url: contextRootPath + '/dataStatistics/getStatisticsAllYears',
            method: 'get',
            valueField: 'id',
            textField: 'text',
            panelHeight: 'auto',
            editable: false,
            onChange: function (newValue, oldValue) {
                generateLogoutStatisticsCharts(newValue);
                generateLogoutCompareStatisticsCharts(newValue);
            }
        });
    });

    /**
     * 用户注销月度统计
     * @param targetYear
     */
    function generateLogoutStatisticsCharts(targetYear) {

        var result;

        $.ajax({
            type: 'get',
            url: contextRootPath + "/dataStatistics/logoutStatisticsCharts",
            data: {'staYear': targetYear},
            async: false,
            dataType: 'json',
            success: function (data) {
                result = data;
            }
        });

        var regCountCharts = echarts.init(document.getElementById("logoutCountCharts"), 'macarons');
        var option = {
            title: {
                text: "#(_res.get('statistic.echarts.cancellation.title'))",
                subtext: "#(_res.get('statistic.echarts.cancellation.main'))"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: legendDataArr,
                left:'middle'
            },
            toolbox: {
                show: true
            },
            calculable: false,
            xAxis: [
                {
                    type: 'category',
                    data: ["#(_res.get('january'))", "#(_res.get('february'))", "#(_res.get('march'))", "#(_res.get('april'))", "#(_res.get('may'))", "#(_res.get('june'))", "#(_res.get('july'))", "#(_res.get('august'))", "#(_res.get('september'))", "#(_res.get('october'))", "#(_res.get('november'))", "#(_res.get('december'))"]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: "#(_res.get('statistic.echarts.logout.sum'))",
                    type: 'bar',
                    data: result['#(com.gmrz.uap.datastatistics.DataStatisticsController::STATISTICS_RESULT_KEY_ALL)'],
                    markPoint: {
                        data: [
                            {type: 'max', name: "#(_res.get('statistic.echarts.max'))"},
                            {type: 'min', name: "#(_res.get('statistic.echarts.min'))"}
                        ]
                    },
                    markLine: {
                        lineStyle: {
                            normal: {
                                type: 'dashed'
                            }
                        },
                        data: [
                            {type: 'average', name: "#(_res.get('statistic.echarts.avg'))"}
                        ]
                    }
                },
                #for(authType : authTypeList)
                    {
                        name : "#(authType.dictName)",
                            type : "bar",
                        stack : "#(_res.get('statistic.echarts.reg.sum'))",
                        data : result['#(authType.dictText)']
                    }
                    #if(!for.last)
                    ,
                    #end
                #end
            ]
        };

        regCountCharts.setOption(option);

    }

    /**
     * 用户注销月度环比统计
     * @param targetYear
     */
    function generateLogoutCompareStatisticsCharts(targetYear) {

        var result;

        $.ajax({
            type: 'get',
            url: contextRootPath + "/dataStatistics/logoutCompareStatisticsCharts",
            data: {'staYear': targetYear},
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.ifsequential === '0'){
                    // 将div移除
                    $("#logoutCompareCountCharts").remove();
                }
                result = data;
            }
        });

        var regCountCharts = echarts.init(document.getElementById("logoutCompareCountCharts"), 'macarons');
        var option = {
            title: {
                text: "#(_res.get('statistic.echarts.cancellation.title2'))",
                subtext: "#(_res.get('statistic.echarts.cancellation.main'))"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: legendDataArr,
                left:'middle'
            },
            toolbox: {
                show: true
            },
            calculable: false,
            xAxis: [
                {
                    type: 'category',
                    data: ["#(_res.get('january'))", "#(_res.get('february'))", "#(_res.get('march'))", "#(_res.get('april'))", "#(_res.get('may'))", "#(_res.get('june'))", "#(_res.get('july'))", "#(_res.get('august'))", "#(_res.get('september'))", "#(_res.get('october'))", "#(_res.get('november'))", "#(_res.get('december'))"]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: "#(_res.get('statistic.echarts.logout.sum'))",
                    type: 'bar',
                    data: result['#(com.gmrz.uap.datastatistics.DataStatisticsController::STATISTICS_RESULT_KEY_ALL)'],
                    markPoint: {
                        data: [
                            {type: 'max', name: "#(_res.get('statistic.echarts.max'))"},
                            {type: 'min', name: "#(_res.get('statistic.echarts.min'))"}
                        ]
                    },
                    markLine: {
                        lineStyle: {
                            normal: {
                                type: 'dashed'
                            }
                        },
                        data: [
                            {type: 'average', name: "#(_res.get('statistic.echarts.avg'))"}
                        ]
                    }
                },
                #for(authType : authTypeList)
                    {
                        name : "#(authType.dictName)",
                            type : "bar",
                        stack : "#(_res.get('statistic.echarts.reg.sum'))",
                        data : result['#(authType.dictText)']
                    }
                    #if(!for.last)
                    ,
                    #end
                #end
            ]
        };

        regCountCharts.setOption(option);
    }

</script>

#end



